<template>
  <view>
    <u-navbar title="发帖记录" autoBack fixed placeholder right-icon="plus-circle" @rightClick="goPublish"></u-navbar>
    <view class="content">
      <z-paging ref="paging" fixed use-safe-area-placeholder refresher-vibrate refresher-only
			@query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time
			style="top: calc(44px + var(--status-bar-height));" @scroll="onScroll">
        <view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="album">
						<view class="album__header" @click="goUserInfo(item)">
							<view class="album__avatar">
								<u-avatar :src="fileUrl + item.avatar" :size="48"></u-avatar>
							</view>
							<view class="album__user">
								<view class="name">{{ item.author }}</view>
								<view class="dept">{{ item.clazz }}</view>
							</view>
						</view>
						<view class="album__content">
							<view class="album__content_text" @click="goDetail(item)">
								<u-parse :content="item.content" :style="{ height: item.toggle || item.row < 5 ? 'auto' : '110px', overflow: 'hidden' }"></u-parse>
								<view class="toggleBtn" v-if="item.row > 5" @click.self.stop="open(item)">{{ item.toggle ? '收起' : '展开' }}</view>
							</view>
              <c-album-list :urls="item.images" :multipleSize="multipleSize" :space="10"></c-album-list>
						</view>
						<u-gap height="5" bgColor="#f5f5f5"></u-gap>
						<view class="album__footer">
							<view>
								<image src="/static/tab2/icon_views.png"></image>
								<text>{{ item.views }}</text>
							</view>
							<view>
								<image src="/static/tab2/icon_comments.png"></image>
								<text>{{ item.comments }}</text>
							</view>
							<view>
								<image src="/static/tab2/icon_likes.png"></image>
								<text>{{ item.likes }}</text>
							</view>
						</view>
					</view>
				</view>
        <u-loadmore :status="loadMore" :marginBottom="20" />
      </z-paging>
    </view>
  </view>
</template>

<script>
import { 
  getForumList
} from '@/api/forum'
import mixin from '@/mixin'
export default {
  data() {
    return {
      multipleSize: 70,
    }
  },
  mixins: [mixin],
  created() {
    this.getDataList(true)
  },
  methods: {
    goPublish() {
      uni.navigateTo({
        url: '/pages/tab2/publish/index',
        animationType: 'slide-in-bottom'
      })
    },
    getDataList(isRefresh) {
      uni.$emit('hideLoading')
      const params = {}
      params.size = 20
      params.current = this.current
      params.siftStatus = '2'
      getForumList(params).then(res => {
        this.isRequest = false
        if(res.code === 200) {
          if(isRefresh) {
            this.dataList = []
          }
          res.data.list.forEach(item => {
            const images = []
            let index = item.content.indexOf('</p>')
            item.row = 0
            while(index != -1) {
              index = item.content.indexOf('</p>', index + 1)
              item.row++
            }
            JSON.parse(item.images).map(img => {
              images.push(this.fileUrl + img)
            })
            item.images = images
            this.dataList.push(item)
          })
          if(this.dataList.length < res.data.total) {
            this.loadMore = 'loadmore'
          }else {
            this.loadMore = 'nomore'
          }
          this.$refs.paging.complete()
        }
      }).catch(err => {
        this.isRequest = false
        this.$refs.paging.complete()
      })
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/tab2/detail/index?id=${item.id}`
      })
    },
    open(item) {
      const index = this.dataList.findIndex(data => {
        return data.id == item.id
      })
      this.$set(this.dataList[index], 'toggle', !item.toggle)
    },
  },
  updated() {
    const dom = uni.createSelectorQuery().in(this).select('.content')
    dom.boundingClientRect((info) => {
      this.contentHeight = info.height
      this.multipleSize = (info.width - 60) / 3
    }).exec()
  }
} 
</script>